<template>
    <div>
        <div id="categoryChart" style="width: 100%; height: 500px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getNormalCategoryAll } from "@/api/goods_management/goods_category/goodsCategoryApi";
import { queryPageByQo } from "@/api/goods_management/goods/goodsApi";

export default {
    data() {
        return {
            chart: null,
            categoryData: [],
            goodsData: []
        };
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById('categoryChart'));
            this.updateChart();
        },
        async loadData() {
            // 获取所有分类
            const categoryRes = await getNormalCategoryAll();
            if (categoryRes.data.code === 200) {
                this.categoryData = categoryRes.data.data;
            }
            // 获取所有商品
            const goodsRes = await queryPageByQo({
                pageSize: 1000, // 设置较大的页面大小以获取所有商品
                currentPage: 1
            });
            if (goodsRes.data.code === 200) {
                this.goodsData = goodsRes.data.data.records;
            }
            this.updateChart();
        },
        updateChart() {
            if (!this.chart) return;
            // 统计每个分类的商品数量
            const categoryCount = {};
            this.categoryData.forEach(category => {
                categoryCount[category.name] = 0;
            });
            this.goodsData.forEach(goods => {
                const category = this.categoryData.find(c => c.id === goods.categoryId);
                if (category) {
                    categoryCount[category.name]++;
                }
            });
            // 准备图表数据
            const chartData = Object.entries(categoryCount).map(([name, value]) => ({
                name,
                value
            }));
            const option = {
                title: {
                    text: '商品分类占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: Object.keys(categoryCount)
                },
                series: [
                    {
                        name: '商品数量',
                        type: 'pie',
                        radius: '50%',
                        data: chartData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.chart.setOption(option);
        }
    },
    mounted() {
        this.initChart();
        this.loadData();
        
        // 添加窗口大小变化监听，使图表自适应
        window.addEventListener('resize', () => {
            this.chart && this.chart.resize();
        });
    },
    beforeDestroy() {
        // 移除窗口大小变化监听
        window.removeEventListener('resize', () => {
            this.chart && this.chart.resize();
        });
        // 销毁图表实例
        if (this.chart) {
            this.chart.dispose();
        }
    }
};
</script>

<style scoped>
#categoryChart {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
</style> 